<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <!--[if lt IE 9]
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]>-->
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <title></title>
</head>
<style>
    body{
        margin:0;
        padding:0;
        overflow: hidden;
        background-color:#26bbc1;
    }
    .wrap{
        width:100%;
        height:100%;
        background: -webkit-gradient(linear, left top, left bottom, from(#0367f9), to(#26bbc1));
        background: -webkit-linear-gradient(#0367f9, #26bbc1);
        background: linear-gradient(#0367f9, #26bbc1);
        background-color:#0367f9;
        position: absolute;
    }
    .cont{
        /*width:74%;*/
        width:320px;
        margin:0 auto;
    }
    .logo{width:100px;height:100px;margin:80px auto 50px;border-radius:4px;/*background-color:rgba(255,255,255,0.1);*/}
    .title{width:80px;height:80px;line-height: 80px;font-size:18px;font-weight:normal;display:inline-block;text-align:center;color:#fff;margin:10px;padding:0;/*background-color:rgba(255,255,255,0.1);border-radius: 40px;*/}
    .item{width:100%;height:40px;border-radius:4px;margin:20px auto 0;outline: none;}
    .btncont{width:100%;margin:0px auto;}
    .btn{background-color:#0cc455;color:#fff;font-weight: bold;border:none;}
    .btn:hover{background-color:#5ed18c;}
    .inp{width:90%;padding:0 5%;height:40px;border:none;line-height:40px;color:#666;text-align: center;}
    /*input-placeholder { /!* WebKit browsers *!/*/
        /*color:    #999;*/
    /*}*/

    .tipcont{width:74%;margin:0 auto;text-align: center;}
    .url{color:#fff;display: inline-block;margin-top:30px;}
    @media screen and (min-width: 360px) and (max-width: 988px){
        .cont{width:320px;}
    }
    @media screen and (max-width: 359px) {
        .cont{width:76%;}
        .tipcont{width:100%;}
    }
</style>
<body>
<div class="wrap">
    <div class="cont">
        <div class="logo">
            <!--<img src="" alt=""/>-->
            <h3 class="title">欢迎登录</h3>
        </div>
        <div class="inpcont">
            <input type="password" class="inp item" id="pwd" placeholder="请输入密码"/>
        </div>
        <div class="btncont">
            <button class="item btn" id="btn">登 录</button>
        </div>
    </div>

    <div class="tipcont">
        <div class="input-info">
            <a class="url" target="_blank" href="https://github.com/liudf0716/apfree_wifidog">Power by ApFree WiFiDog</a>
            <p class="adbyby-p" style="margin-top:30px;margin-bottom:10px;">
           <!-- Place this tag where you want the button to render. -->
                <a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch liudf0716/apfree_wifidog on GitHub">Watch</a>
                <!-- Place this tag where you want the button to render. -->
                <a class="github-button" href="https://github.com/liudf0716/apfree_wifidog" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star liudf0716/apfree_wifidog on GitHub">Star</a>
                <!-- Place this tag where you want the button to render. -->
                <a class="github-button" href="https://github.com/liudf0716/apfree_wifidog/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork liudf0716/apfree_wifidog on GitHub">Fork</a>

            </p>
        </div>
    </div>
</div>
<script>
    /* 封装ajax函数
       * @param {string}opt.type http连接的方式，包括POST和GET两种方式
       * @param {string}opt.url 发送请求的url
       * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
       * @param {object}opt.data 发送的参数，格式为对象类型
       * @param {function}opt.success ajax发送并接收成功调用的回调函数
       */
         function ajax(opt) {
             opt = opt || {};
             opt.method = opt.method.toUpperCase() || 'POST';
             opt.url = opt.url || '';
             opt.async = opt.async || true;
             opt.data = opt.data || null;
             opt.success = opt.success || function () {};
             var xmlHttp = null;
             if (XMLHttpRequest) {
                     xmlHttp = new XMLHttpRequest();
                 }
             else {
                     xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
                 }var params = [];
             for (var key in opt.data){
                     params.push(key + '=' + opt.data[key]);
                 }
             var postData = params.join('&');
             if (opt.method.toUpperCase() === 'POST') {
                     xmlHttp.open(opt.method, opt.url, opt.async);
                     xmlHttp.setRequestHeader('Content-Type', 'application/json');
//                     xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
                     xmlHttp.send(postData);
                 }
             else if (opt.method.toUpperCase() === 'GET') {
                     xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
                     xmlHttp.send(null);
                 }
             xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                             opt.success(xmlHttp.responseText);
                         }
                 };
         }


    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var pwd = document.getElementById('pwd').value;
            if(pwd == ''){
                alert('输入不能为空');
                return false;
            }
            ajax({
                method:'GET',
                url:'',
                data:{
//                    user:user,
//                    pwd:pwd
                },
                success: function(response){
                    console.log(response);
                }
            })
        }
    }
</script>
</body>
</html>
